<template>
  <div
    style="position:fixed;width: 300px;left: 10px;top:100px; border:0px solid #123123;z-index: 100;"
  >
    <el-menu
      ref="domMenu"
      class="el-menu-vertical-demo"
      default-active="1"
      v-bind="$attrs"
      :background-color="backgroundColor"
      @select="select"
      @open="open"
      @close="close"
    >
      <!--递归调用，支持n级菜单 myMenu-->
      <my-sub-menu :subMenu="menus"/>
    </el-menu>
  </div>
</template>

<script>
  // 模块菜单
  import { reactive, ref, watch } from 'vue'
  import { ElMenu } from 'element-plus'
  // 状态
  import { store } from '@naturefw/nf-state'
  // 展示子菜单
  import mySubMenu from './menu-show-sub.vue'

  import menuController from './_menu-controller'

</script>

<script setup>
 const props = defineProps({
    'background-color': {
      tyoe: String,
      default: '#ece5d9'
    }
  })

  // 当前菜单、文档内容，菜单列表
  const { current, menuList } = store
  
  // 自动展开菜单用
  const domMenu = ref(null)

  // 菜单集合
  const menus = reactive([])

  const {
    watchNaviId,
    select,
    open,
    close
  } = menuController(domMenu, menus)
  
  
  // 根据当前导航项ID，获取菜单列表
  watch(() => current.naviId, (id) => {
    if (!id) return
    const mm = menuList.find(item => item.naviId === id)
    if (!mm) return
    // 可能会找不到对应的菜单
    menus.length = 0
    menus.push(...mm.menus)
    // 设置URL地址、菜单、加载文档等
    watchNaviId()
  }, {immediate: true})
  

</script>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    max-width: 320px;
    min-height: 400px;
  }
</style>
